<template>
  <div class="page-content flex canary">
    <movieAd />
    <section class="topbar">
      <div class="white-bg topbar-bg">
        <div class="city-entry" @click="pushCityList">
          <span class="city-name">{{
            cityName || nowcityName || "定位中..."
          }}</span>
          <i class="city-entry-arrow"></i>
        </div>
        <div class="switch-hot-default" :data-active="default_active">
          <router-link
            :to="hots.path"
            @click.native="hot_items_Handler(index, hots.id)"
            v-for="(hots, index) in hot_items"
            :key="hots.id"
            :class="default_active == hots.id ? 'hot-item active' : 'hot-item'"
            :data-tab="hots.id"
          >
            <h2>{{ hots.text }}</h2>
          </router-link>
        </div>
        <router-link
          to="/search"
          class="link search-entry search-icon"
        ></router-link>
      </div>
    </section>
    <section class="movie singleton page active" data-page=".movie">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </section>
    <movieBodyFooter />
  </div>
</template>
<script>
import movieBodyFooter from "./movie_body_footer.vue";
import movieAd from "./movie_ad.vue";
import { getLocation } from "../../utils/$getlocation";
import { mapState } from "vuex";

export default {
  components: {
    movieBodyFooter,
    movieAd,
  },
  async created() {
    let res = await getLocation();
    this.nowcityName = res.addressComponent.city.slice(0, 2);
  },
  mounted() {
    this.setDefault_active();
    document.querySelector("body").className = "page-movie-body";

  },
  data() {
    return {
      title: "泽枫影城",
      nowcityName: "",
      current: 0,
      default_active: ".n-hot",
      hot_items: [
        {
          id: ".n-hot",
          text: "热映",
          path: "/movie/_hot",
        },
        {
          id: ".cinema",
          text: "影院",
          path: "/movie/_cinema",
        },
        {
          id: ".f-hot",
          text: "待映",
          path: "/movie/_soon",
        },
        {
          id: ".classic",
          text: "经典电影",
          path: "/movie/_classic",
        },
      ],
    };
  },
  computed: {
    ...mapState("city", ["cityName"]),
  },
  methods: {
    setDefault_active() {
      this.default_active = this.hot_items.filter(
        item => item.path == this.$route.path
      )[0].id;
    },
    hot_items_Handler(index, id) {
      this.current = index;
      this.default_active = id;
    },
    pushCityList() {
      this.$router.push("/city_list");
    },
  },
};
</script>
<style>
.page-movie-body #movie_main{
  overflow: hidden;
}
.layout .page-content {
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.download-app-bar-custom {
  position: relative;
  height: 1.2rem;
  width: 100%;
  background-color: #fff;
  z-index: 11;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  left: 0;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
.download-app-bar-custom h1 {
  display: inline;
}
.download-app-bar-custom .logo_custom {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.88rem;
  height: 0.78rem;
}
.download-app-bar-custom .benefit-text {
  display: inline-block;
  position: absolute;
  height: 0.34rem;
  line-height: 0.34rem;
  right: 2rem;
  font-size: 0.26rem;
  font-family: PingFangSC-Regular, Arial, Helvetica, sans-seri;
  font-weight: 620;
  color: #666;
  text-decoration: none;
}
@media (max-width: 360px) {
  .btn-open-app-custom {
    top: 0.35rem;
  }

  .split {
    top: 0.26rem;
  }
}

@media (min-width: 414px) {
  .btn-open-app-custom {
    top: 0.36rem;
  }

  .split {
    top: 0.3rem;
  }
}

@media (min-width: 375px) {
  .download-app-bar-custom .btn-open-app-custom {
    font-size: 16px;
  }

  .download-app-bar-custom .benefit-text {
    font-size: 14px;
  }

  .download-app-bar-custom .split {
    right: 1.82rem;
  }
}
.download-app-bar-custom .split {
  display: inline-block;
  position: absolute;
  width: 0.02rem;
  height: 0.52rem;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.5);
}
.download-app-bar-custom .btn-open-app-custom {
  position: absolute;
  right: 0.24rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 700;
  text-align: center;
  font-family: PingFangSC-Medium;
  color: #b37e7e;
}
.link {
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.download-app-bar-custom .point {
  padding-left: 0.02rem;
  width: auto;
}
.img.noneBg {
  background: none;
}
.img {
  border: 0;
  display: inline-block;
}
/*  */
.topbar {
  border-bottom: 0.02rem solid #e6e6e6;
  height: 0.9rem;
}
.white-bg {
  background-color: #fff;
}
.topbar-bg {
  display: flex;
  align-items: center;
  height: 0.88rem;
  justify-content: space-between;
}
.city-entry {
  padding-left: 0.3rem;
  font-size: 0.3rem;
  color: #666;
  display: flex;
  align-items: center;
}
.switch-hot-default {
  display: flex;
  height: 0.88rem;
  line-height: 0.88rem;
  position: relative;
  justify-content: space-around;
}
.city-entry .city-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1.4rem;
  max-width: 19.2vw;
}
.city-entry-arrow {
  width: 0;
  height: 0;
  border: 0.08rem solid transparent;
  border-top-color: #b0b0b0;
  display: inline-block;
  margin-left: 0.08rem;
  margin-right: 0.1rem;
  margin-top: 0.1rem;
}
.switch-hot-default .hot-item.active {
  color: #333;
}
.switch-hot-default .hot-item {
  font-size: 0.3rem;
  color: #666;
  width: 0.8rem;
  width: 10.66666667vw;
  text-align: center;
  margin: 0 1.33333333vw;
  font-weight: 700;
}
.switch-hot-default .hot-item.active h2 {
  font-size: 0.34rem;
}
.switch-hot-default .hot-item h2 {
  display: inline;
  font-size: 0.3rem;
  font-weight: 700;
}
.switch-hot-default .hot-item[data-tab=".classic"] {
  width: 1.6rem;
  width: 21.33333333vw;
}
.switch-hot-default[data-active=".cinema"]:after {
  left: 1.3rem;
  left: 17.33333333vw;
}
.switch-hot-default[data-active=".f-hot"]:after {
  left: 2.3rem;
  left: 30.66666667vw;
}
.switch-hot-default[data-active=".classic"]:after {
  left: 3.7rem;
  left: 49.33333333vw;
}
.switch-hot-default .hot-item h2 {
  display: inline;
  font-weight: 700;
}
.switch-hot-default[data-active=".n-hot"]:after {
  left: 0.3rem;
  left: 4vw;
}
.switch-hot-default:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.02rem;
  width: 0.4rem;
  width: 5.33333333vw;
  border-radius: 0.02rem;
  height: 0.06rem;
  background-color: #f03d37;
  transition: left 0.2s;
}
.search-icon {
  width: 0.4rem;
  height: 0.4rem;
  background: url(//s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png)
    no-repeat;
  background-size: 0.4rem;
  padding: 0.2rem 0.3rem 0.2rem 0.2rem;
  background-position: 0.2rem;
}
</style>